<template>
  <div id="app" style="width: 100%;height: 100%">
   <location-map-image :geo-json="geoJson"></location-map-image>
  </div>
</template>

<script>
  import LocationMapImage from "./components/LocationMapImage";
export default {
  name: 'app',
  components:{
    LocationMapImage
  },
  data () {
    return {
      geoJson:{
        "type": "Polygon",
        "coordinates": [
          [
            [
              109.48974609375,
              34.66935854524543
            ],
            [
              108.25927734375,
              31.952162238024975
            ],
            [
              111.81884765624999,
              30.334953881988564
            ],
            [
              114.2138671875,
              31.27855085894653
            ],
            [
              113.92822265625,
              32.861132322810946
            ],
            [
              112.8076171875,
              34.32529192442733
            ],
            [
              111.9287109375,
              34.97600151317588
            ],
            [
              109.48974609375,
              34.66935854524543
            ]
          ]
        ]
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

body,html{
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}
</style>
